<template>
    <!-- 头部 -->
    <div class="header">
        <h2>影院列表</h2>
        <div>
            <el-input @click="filmlist" size="large" style="width:400px;" v-model="SearchData" placeholder="请输入影院名">
                <template #append><el-button :icon="Search" /></template>
            </el-input>
        </div>
    </div>
    <!-- 影院列表 -->
    <el-table :data="FilmData" style="width: 100%">
        <el-table-column align="center" label="序号" width="80" type="index" :index="1" />
        <el-table-column align="center" label="电影院" width="230">
            <template #default="scope"><span>{{ scope.row.name }}</span></template>
        </el-table-column>
        <el-table-column align="center" label="所在城市" width="120">
            <template #default="scope"><span>{{ scope.row.city_name }}</span></template>
        </el-table-column>
        <el-table-column align="center" label="所在区" width="120">
            <template #default="scope"><span>{{ scope.row.district_name }}</span></template>
        </el-table-column>
        <el-table-column align="center" label="具体地址" width="330">
            <template #default="scope"><span>{{ scope.row.address }}</span></template>
        </el-table-column>
        <el-table-column align="center" label="状态">
            <template #default="scope">
                <el-tag v-if="scope.row.status == '1'">正常营业</el-tag>
                <el-tag type="error" v-else="scope.row.gender=='3'">暂停营业</el-tag>
            </template>
        </el-table-column>
        <!-- 空状态 -->
        <template #empty><el-empty description="暂无数据" /></template>
    </el-table>
    <el-pagination background layout="prev, pager, next" @current-change="filmlist" v-model:current-page="page"
        :total="total" />
    <!-- 分页 -->
</template>

<script setup lang="ts">
import { films } from '@/service/film';
import { Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { ref } from 'vue';

// 搜索框
const SearchData = ref()
// 渲染列表
const FilmData = ref()
// 总页码
const total = ref()
// 当前页码
const page = ref(1)

// 获取影院列表数据
const filmlist = () => {
    let keyword = !SearchData.value ? '' : SearchData.value
    films(page.value, keyword).then((res: any) => {
        console.log(res)
        if (res.errNo === 0) {
            FilmData.value = res.paginate.data
            total.value = res.paginate.total
            ElMessage({
                message: '加载成功！',
                type: 'success',
            })
        }
    })
}
filmlist()

</script>

<style scoped>
.header {
    display: flex;
    justify-content: space-between;
    height: 80px;
    line-height: 80px;
    padding: 0 30px;
}

.el-pagination {
    margin-top: 20px;
    margin-left: 10px;
    margin-bottom: 15px;
}
</style>